<template>
	<view class="u-m-t-20">
		<view class="box-color box-padding u-font-28 grey-color">
			<view class="u-font-bold u-text-color u-m-b-20">物流信息</view>
			<view class="u-flex u-row-between u-m-b-16">
				<view>物流单号</view>
				<view>{{ info.logisticalNo }}</view>
			</view>
			<view class="u-flex u-row-between u-m-b-16">
				<view>物流公司</view>
				<view>{{ info.logisticalCompany }}</view>
			</view>
			<view class="u-flex u-row-between u-m-b-16">
				<view>物流电话</view>
				<view>{{ info.phoneNumber }}</view>
			</view>
			<view class="u-flex u-row-between u-m-b-16">
				<view>物流单图片</view>
				<view>
					<image v-for="(item,index) in info.resources" :src="item.url" :key="item.id" mode="" @click="previewImg(index)" style="width: 52rpx;margin-left:10rpx;height: 52rpx;"></image>
				</view>
			</view>
			<view class="u-flex u-row-between">
				<view>物流备注</view>
				<view>{{ info.remarks || '无'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		methods:{
			// 预览图片
			previewImg(index) {
				const imageArr = this.info.resources.map((row) => {
					return row['url'];
				});
				console.log(imageArr);
				uni.previewImage({
					current: index,
					urls: imageArr,
					indicator: 'number',
					loop: true
				});
			},
		}
	}
</script>

<style>
</style>
